<template>
      <div :id="uuid"  class="echarsBox" ></div>
</template>
  
  <script setup>
import { ref,defineProps,defineEmits,onMounted,getCurrentInstance,watch,onUnmounted } from 'vue';
import * as echarts from 'echarts';
import { colProps } from 'element-plus';
const props = defineProps({
    echartsOption: {
    type: Object,
    required: true,
  },
});
watch(() => props.echartsOption, (val) => {
  init()
});


var uuid = new Date().getTime()+Math.random().toString(32).slice(2, 10)
var myChart;
const emit = defineEmits(["childEvent","dialogData"])
const init = () => {
   myChart.setOption(props.echartsOption,true);
   myChart.getZr().on("click", (params) => {
      emit('dialogData',props.echartsOption)
   });
}


onMounted (() => {
  myChart = echarts.init(document.getElementById(uuid));
    init()
    
  window.addEventListener(
      "resize",
      () => {
        myChart.resize()
        emit('childEvent')
      }
    )
})

const someMethod = () => {
    return {
    }
}
  </script>
  
  <style scoped>
  .echarsBox{
    width: 100%;
    height: 100%;
  }
  
  </style>
  
